<template>
  <section class="floor-list">
    <div class="floor-wrap" v-for="(floor, index) in list" :key="index">
      <img class="floor-head" :src="floor.headUrl" />
      <div class="floor-content">
        <div
          class="floor-category"
          v-for="(category, index) in floor.list"
          :key="index"
        >
          <p class="p1">{{ category.title }}</p>
          <p class="p2">{{ category.desc }}</p>
          <div class="floor-products">
            <img
              :src="product.imgUrl"
              v-for="(product, index) in category.products"
              :key="index"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { homeFloorlist } from "../../../api";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    homeFloorlist((res) => {
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
.floor-head {
  background-color: #f6f6f6;
}
.floor-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .floor-category {
    width: 50%;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    p {
      margin: 0;
      padding-left: 30px;
      font-size: 35px;
    }
    .p1 {
      margin: 5px 0;
    }
    .p2 {
      color: red;
    }
  }
  .floor-products {
    display: flex;
    justify-content: space-around;

    img {
      width: 90px;
      margin: 20px;
    }
  }
}
</style>